<template>
  <p class="con-title">
    <span>
      <img src="@/assets/img/control/content/Group769.png" />
    </span>
    <span>变更</span>
  </p>
  <el-tabs v-model="changType" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="变更规格" :name="1">
      <div>
        <div class="specification">
          <div class="cpuTypeList">
            <span>CPU架构：</span>
            <div class="CPUarchitecture">
              <div :class="{ active: currentCpu == 1 }" @click="architec">X86计算</div>
              <div :class="{ active: currentCpu == 2 }" @click="architecNike">
                鲲鹏计算
              </div>
            </div>
          </div>
          <div class="selectSpecificationMain" v-if="stateType">
            <div class="selectSpecification">
              <div>
                <el-select
                  v-model="x86vCPUsValue"
                  class="m-2"
                  placeholder="----- 请选择vCPUs -----"
                  style="width: 288px; margin-right: 20px"
                  clearable
                  @change="x86vCPu"
                >
                  <el-option
                    v-for="item in x86vCPUsOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div>
                <el-select
                  v-model="x86MemoryValue"
                  class="m-2"
                  placeholder="----- 请选择内存 -----"
                  style="width: 288px"
                  clearable
                  @change="x86Memory"
                >
                  <el-option
                    v-for="item in x86MemoryOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="specificationList">
              <span
                v-for="(item, index) in specificationList"
                @click="specificationListBtn(index)"
                :key="index"
                :class="item.type == 1 ? 'type1' : 'type2'"
              >
                {{ item.title }}
              </span>
            </div>
            <div class="specificationList">
              <span :class="allType == 1 ? 'type1' : 'type2'" @click="all">全部</span>
              <span
                v-for="(item, index) in generationList"
                @click="generationListBtn(index)"
                :key="index"
                :class="item.type == 1 ? 'type1' : 'type2'"
              >
                {{ item.extra_specs["ecs:generation"] }}
              </span>
            </div>
            <div class="specificationOutside">
              <div class="specificationOutsideTop">
                <div class="title">
                  <div>规格名称</div>
                  <div style="margin-left: 40px">VCPUs</div>
                  <div>内存</div>
                  <div>基准/最大带宽</div>
                  <div>内网收发包</div>
                </div>
                <div
                  v-for="(item, index) in conList"
                  :key="index"
                  :class="
                    item.type == 1 ? 'specificationContent' : 'specificationContent1'
                  "
                  @click="setSpecification(index)"
                >
                  <div>{{ item.name }}</div>
                  <div>{{ item.vcpus }}vCPUs</div>
                  <div>{{ item.ram / 1024 }}GiB</div>
                  <div>
                    {{
                      item.extra_specs["quota:min_rate"]
                        ? item.extra_specs["quota:min_rate"] / 1000
                        : 0
                    }}
                    /
                    {{
                      item.extra_specs["quota:max_rate"]
                        ? item.extra_specs["quota:max_rate"] / 1000
                        : 0
                    }}
                    Gbit/s
                  </div>
                  <div>{{ item.extra_specs["quota:max_pps"] / 10000 }}万PPS</div>
                </div>
              </div>
            </div>
          </div>
          <div class="selectSpecificationMain" v-else>
            <div class="selectSpecification">
              <div>
                <el-select
                  v-model="kunPengvCPUsValue"
                  class="m-2"
                  placeholder="----- 请选择vCPUs -----"
                  style="width: 288px; margin-right: 20px"
                  @change="kunpengvCPu"
                >
                  <el-option
                    v-for="item in kunPengvCPUsOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div>
                <el-select
                  v-model="kunPengMemoryValue"
                  class="m-2"
                  placeholder="----- 请选择内存 -----"
                  style="width: 288px"
                  @change="kunPengMemory"
                >
                  <el-option
                    v-for="item in kunPengMemoryOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="specificationList">
              <span
                v-for="(item, index) in kunPengSpecificationList"
                @click="kunPengSpecificationBtn(index)"
                :key="index"
                :class="item.type == 1 ? 'typeAbout1' : 'typeAbout2'"
              >
                {{ item.title }}
              </span>
            </div>
            <div class="specificationOutside">
              <div class="specificationOutsideTop">
                <div class="title">
                  <div>规格名称</div>
                  <div style="margin-left: 40px">VCPU</div>
                  <div>内存</div>
                  <div>基准/最大带宽</div>
                  <div>内网收发包</div>
                </div>
                <div
                  v-for="(item, index) in conList"
                  :key="index"
                  :class="
                    item.type == 1 ? 'specificationContent' : 'specificationContent1'
                  "
                  @click="setSpecification(index)"
                >
                  <div>{{ item.name }}</div>
                  <div>{{ item.vcpus }}vCPUs</div>
                  <div>{{ item.ram / 1024 }}GiB</div>
                  <div>
                    {{
                      item.extra_specs["quota:min_rate"]
                        ? item.extra_specs["quota:min_rate"] / 1000
                        : 0
                    }}
                    /
                    {{
                      item.extra_specs["quota:max_rate"]
                        ? item.extra_specs["quota:max_rate"] / 1000
                        : 0
                    }}
                    Gbit/s
                  </div>
                  <div>{{ item.extra_specs["quota:max_pps"] / 10000 }}万PPS</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <!-- 磁盘 -->
    <el-tab-pane label="新增磁盘" :name="2">
      <el-row style="margin-top: 30px">
        <el-col :span="2" class="spec-label">磁盘</el-col>
        <el-col :span="22" class="spec-value">
          <div class="clouds">
            <div class="cloudTitle">
              <span class="yunTitle">云硬盘</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="2">
          <span class="addDataDisk">新增数据盘</span>
        </el-col>
        <el-col :span="22">
          <div
            v-for="(item, index) in data_volume"
            :key="index"
            style="display: flex; align-items: center"
            class="addMsgBox"
          >
            <div style="margin: 0 10px 0 0">
              <el-select
                v-model="item.diskType"
                class="m-2"
                placeholder="内存"
                style="width: 288px"
                @change="isNumber1"
              >
                <el-option
                  v-for="item in stytemOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="addSubtractBox">
              <el-input-number
                v-model="item.size"
                :min="0"
                step-strictly
                :max="5000"
                style="width: 100%"
                @change="isNumber1"
              />
            </div>
            GiB
            <span style="margin: 0 20px">GBIIOPS上限1800，1OPS突发上限5000</span>
            <el-button type="danger" plain @click="reduce(index)">-</el-button>
          </div>
          <el-button
            style="margin: 20px 0"
            type="primary"
            plain
            v-if="data_volume.length < 5"
            @click="tianjia"
            >+</el-button
          >
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="修改带宽" :name="3">
      <el-row style="margin-top: 30px">
        <el-col :span="24" class="spec-value">
          <div class="clouds">
            <div class="cloudBottom">
              <span>修改带宽为</span>
              <div class="addSubtractBox">
                <el-input-number
                  v-model="daiKuanNum"
                  :min="0"
                  step-strictly
                  style="width: 100%"
                  @change="isNumber2"
                />
              </div>
              <span>Mbit/s</span>
              <el-radio-group
                v-model="jingDongType"
                style="margin-left: 20px"
                @change="chooseJingDong"
              >
                <el-radio label="19_bgp" border>静态</el-radio>
                <el-radio label="19_sbgp" border>动态</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>

  <p style="margin-top: 30px">
    需补差价：<span style="color: red; font-size: 20px">￥{{ price }}</span>
  </p>
  <div class="btn-box">
    <el-button @click="cancelChange">取 消</el-button>
    <el-button type="danger" @click="changeSubmit">变 更</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { listResizeFlavors, resizeFlavorPrice } from "@/api/control/myServer";
import { shoppingCar } from "@/api/cloud/index";
import type { TabsPaneContext } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const currentCpu = ref(1);
const stateType = ref(true);
const x86vCPUsValue = ref();
const x86vCPUsOptions = ref<any>([
  { value: "1" },
  { value: "2" },
  { value: "4" },
  { value: "8" },
  { value: "12" },
  { value: "16" },
  { value: "24" },
  { value: "32" },
  { value: "36" },
  { value: "48" },
  { value: "60" },
  { value: "64" },
]);
const x86MemoryValue = ref();
const x86MemoryOptions = ref<any>([
  { value: "1" },
  { value: "2" },
  { value: "4" },
  { value: "8" },
  { value: "16" },
  { value: "24" },
  { value: "32" },
  { value: "48" },
  { value: "64" },
  { value: "96" },
  { value: "128" },
  { value: "192" },
  { value: "216" },
  { value: "252" },
  { value: "256" },
  { value: "288" },
  { value: "348" },
  { value: "352" },
  { value: "384" },
  { value: "464" },
  { value: "504" },
  { value: "512" },
  { value: "560" },
  { value: "696" },
  { value: "768" },
  { value: "934" },
  { value: "960" },
  { value: "1024" },
  { value: "1466" },
  { value: "1536" },
  { value: "1868" },
  { value: "1920" },
  { value: "2932" },
]);
const specificationList = ref<any>([
  { title: "通用计算增强型", type: 2, performancetype: "computingv3" },
  { title: "通用计算型", type: 1, performancetype: "normal" },
  { title: "内存优化型", type: 1, performancetype: "highmem" },
  { title: "超大内存型", type: 1, performancetype: "saphana" },
  { title: "磁盘增强型", type: 1, performancetype: "diskintensive" },
  { title: "超高I/O型实例", type: 1, performancetype: "highio" },
  { title: "GPU加速型", type: 1, performancetype: "gpu" },
  { title: "AI加速型", type: 1, performancetype: "ascend" },
  { title: "通用入门型", type: 1, performancetype: "entry" },
]);
const allType = ref(2);
const generationList = ref<any>([]);
const conList = ref<any>([]);
const X86List = ref<any>([]);
const kunPengList = ref<any>([]);
const x86MemoryList = ref<any>([]);
const x86vCPusList = ref<any>([]);
const typeList = ref<any>([]);
const x86xuanzhong = ref(specificationList.value[0].title);
const xuanzhongObj = ref<any>({});
const kunPengvCPUsValue = ref();
const kunPengMemoryValue = ref();
const kunPengSpecificationList = ref<any>([
  { title: "AI加速型", type: 2, performancetype: "ascend" },
  { title: "鲲鹏通用计算增强型", type: 1, performancetype: "kunpeng_computing" },
  { title: "鲲鹏内存优化型", type: 1, performancetype: "kunpeng_highmem" },
  { title: "鲲鹏超高I/O型", type: 1, performancetype: "highio" },
]);
const kunPengvCPUsOptions = ref<any>([
  { value: "1" },
  { value: "2" },
  { value: "4" },
  { value: "8" },
  { value: "12" },
  { value: "16" },
  { value: "24" },
  { value: "32" },
  { value: "36" },
  { value: "48" },
  { value: "60" },
  { value: "64" },
]);
const kunPengMemoryOptions = ref<any>([
  { value: "1" },
  { value: "4" },
  { value: "8" },
  { value: "16" },
  { value: "24" },
  { value: "32" },
  { value: "48" },
  { value: "64" },
  { value: "72" },
  { value: "96" },
  { value: "120" },
  { value: "128" },
  { value: "192" },
  { value: "228" },
  { value: "256" },
  { value: "384" },
  { value: "480" },
]);
const kunpengMemoryList = ref<any>([]);
const kunpengvCPuList = ref<any>([]);
const kunPengXuanzhong = ref(kunPengSpecificationList.value[0].title);
const chooseId = ref<any>(""); //选中的服务器id
const price = ref(0); //需要补的差价
const stytemOptions = ref<any>([
  { label: "高IO", value: "SAS" },
  { label: "通用型SSD", value: "GPSSD" },
  { label: "超高IO", value: "SSD" },
  { label: "极速IO", value: "ESSD" },
]);
const data_volume = ref<any>([]); // 数据盘
const daiKuanNum = ref(0);
const jingDongType = ref("19_bgp");
const regionId = ref<any>("");
const initialId = ref<any>(""); //更改的云服务器id
const changType = ref<any>(1); //tab的类型
const priceKey = ref(""); //变更查价后返回的key，加入购物车需要这个参数
const fafasdasda = ref<any>([]);

onMounted(async () => {
  await getListResizeFlavors();
  conList.value = X86List.value;
  chooseId.value = route.query.chooseId;
  regionId.value = route.query.regionId;
  initialId.value = route.query.id;
});

/**切换标签页 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  changType.value = tab.paneName;
  price.value = 0;
};

/**查询差价 */
const queryPrice = (jsonStr) => {
  resizeFlavorPrice({ jsonStr }).then((res: any) => {
    if (200 == res.code) {
      price.value = res.data.price;
      priceKey.value = res.data.priceKey;
    }
  });
};

/**查询云服务器规格变更支持列表 */
const getListResizeFlavors = async () => {
  await listResizeFlavors({
    instance_uuid: "580c65b8-6a4d-4d90-af1d-10d3bbd87afd",
    source_flavor_id: "s3.xlarge.2",
    source_flavor_name: "s3.xlarge.2",
  }).then((res: any) => {
    res.data.flavors.forEach((item: any) => {
      if (item.extra_specs["info:cpu:name"].indexOf("Kunpeng") != -1) {
        kunPengList.value.push(item);
      }
      if (item.extra_specs["info:cpu:name"].indexOf("Kunpeng") == -1) {
        X86List.value.push(item);
      }
      generationList.value.push(item);
    });
    for (let i = 0; i < generationList.value.length - 1; i++) {
      for (let j = i + 1; j < generationList.value.length; j++) {
        if (
          generationList.value[i].extra_specs["ecs:generation"] ==
          generationList.value[j].extra_specs["ecs:generation"]
        ) {
          generationList.value.splice(j, 1);
          j--;
        }
      }
    }
    generationList.value.forEach((res: any) => {
      res.type = 1;
    });
    generationList.value.forEach((item: any) => {
      if (
        specificationList.value[0].performancetype ==
        item.extra_specs["ecs:performancetype"]
      ) {
        fafasdasda.value.push(item);
      }
    });
    generationList.value = [];
    generationList.value.push();
    generationList.value = fafasdasda.value;
    X86List.value.forEach((res: any) => {
      res.type = 1;
    });
  });
};

const architec = () => {
  if (stateType.value !== true) {
    stateType.value = true;
    conList.value = X86List.value;
  }
  if (currentCpu.value !== 1) {
    currentCpu.value = 1;
  }
};

const architecNike = () => {
  if (stateType.value !== false) {
    stateType.value = false;
    conList.value = kunPengList.value;
    conList.value.forEach((item: any) => {
      item.type = 1;
    });
  }
  if (currentCpu.value == 1) {
    currentCpu.value = 2;
  }
};

const x86vCPu = (e: any) => {
  if (x86MemoryList.value.length == 0) {
    conList.value = X86List.value;
    x86vCPusList.value = [];
    conList.value.forEach((item: any) => {
      if (item.vcpus == e) {
        x86vCPusList.value.push(item);
      }
    });
    conList.value = x86vCPusList.value;
  } else {
    x86vCPusList.value = [];
    conList.value = x86MemoryList.value;
    x86MemoryList.value.forEach((item: any) => {
      if (item.vcpus == e) {
        x86vCPusList.value.push(item);
      }
    });
    conList.value = x86vCPusList.value;
  }
};

const x86Memory = (e: any) => {
  if (x86vCPusList.value.length == 0) {
    x86MemoryList.value = [];
    conList.value = X86List.value;
    conList.value.forEach((item: any) => {
      if (item.ram == e * 1024) {
        x86MemoryList.value.push(item);
      }
    });
    conList.value = x86MemoryList.value;
  } else {
    x86MemoryList.value = [];
    conList.value = x86MemoryList.value;
    x86vCPusList.value.forEach((item: any) => {
      if (item.ram == e * 1024) {
        x86MemoryList.value.push(item);
      }
    });
    conList.value = x86MemoryList.value;
  }
};

const specificationListBtn = (index: number) => {
  specificationList.value.forEach((res: any) => {
    res.type = 1;
  });
  specificationList.value[index].type = specificationList.value[index].type == 1 ? 2 : 1;
  if (x86MemoryList.value.length == 0 && x86vCPusList.value.length == 0) {
    conList.value = typeList.value;
    typeList.value = [];
    X86List.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        specificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  } else if (x86MemoryList.value.length == 0 && x86vCPusList.value.length !== 0) {
    conList.value = typeList.value;
    typeList.value = [];
    x86vCPusList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        specificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  } else if (x86MemoryList.value.length !== 0 && x86vCPusList.value.length == 0) {
    conList.value = typeList.value;
    typeList.value = [];
    x86vCPusList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        specificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  } else {
    conList.value = typeList.value;
    typeList.value = [];
    x86MemoryList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        specificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  }
  x86xuanzhong.value = specificationList.value[index].title;
  generationList.value = [];
  conList.value.forEach((item: any) => {
    if (
      specificationList.value[index].performancetype ==
      item.extra_specs["ecs:performancetype"]
    ) {
      generationList.value.push(item);
    }
  });
  for (let i = 0; i < generationList.value.length - 1; i++) {
    for (let j = i + 1; j < generationList.value.length; j++) {
      if (
        generationList.value[i].extra_specs["ecs:generation"] ==
        generationList.value[j].extra_specs["ecs:generation"]
      ) {
        generationList.value.splice(j, 1);
        j--;
      }
    }
  }
  generationList.value.forEach((res: any) => {
    if (res.type == 1) {
      allType.value = 2;
    }
  });
};

const setSpecification = async (index: number) => {
  conList.value.forEach((item: any) => {
    item.type = 1;
  });
  conList.value[index].type = conList.value[index].type == 1 ? 2 : 1;
  xuanzhongObj.value = conList.value[index];
  const data = {
    flavorRef: xuanzhongObj.value.name,
    id: chooseId.value,
    type: changType.value,
  };
  const jsonStr = JSON.stringify(data);
  await queryPrice(jsonStr);
};

const generationListBtn = (index: number) => {
  generationList.value.forEach((res: any) => {
    res.type = 1;
  });
  generationList.value[index].type = generationList.value[index].type == 1 ? 2 : 1;
  allType.value = 1;
};

const kunPengSpecificationBtn = (index: number) => {
  kunPengSpecificationList.value.forEach((res: any) => {
    res.type = 1;
  });
  kunPengSpecificationList.value[index].type =
    kunPengSpecificationList.value[index].type == 1 ? 2 : 1;
  if (kunpengMemoryList.value.length == 0 && kunpengvCPuList.value.length == 0) {
    conList.value = typeList.value;
    typeList.value = [];
    kunPengList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        kunPengSpecificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  } else if (kunpengMemoryList.value.length == 0 && kunpengvCPuList.value.length !== 0) {
    conList.value = typeList.value;
    typeList.value = [];
    kunpengvCPuList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        kunPengSpecificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  } else if (kunpengMemoryList.value.length !== 0 && kunpengvCPuList.value.length == 0) {
    conList.value = typeList.value;
    typeList.value = [];
    kunpengMemoryList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        kunPengSpecificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  } else {
    conList.value = typeList.value;
    typeList.value = [];
    kunpengvCPuList.value.forEach((item: any) => {
      if (
        item.extra_specs["ecs:performancetype"] ==
        kunPengSpecificationList.value[index].performancetype
      ) {
        typeList.value.push(item);
      }
    });
    conList.value = typeList.value;
  }
  kunPengXuanzhong.value = kunPengSpecificationList.value[index].title;
};

const kunpengvCPu = (e: any) => {
  if (kunpengMemoryList.value.length == 0) {
    conList.value = kunPengList.value;
    kunpengvCPuList.value = [];
    conList.value.forEach((item: any) => {
      if (item.vcpus == e) {
        kunpengvCPuList.value.push(item);
      }
    });
    conList.value = kunpengvCPuList.value;
  } else {
    kunpengvCPuList.value = [];
    conList.value = kunpengMemoryList.value;
    kunpengMemoryList.value.forEach((item: any) => {
      if (item.vcpus == e) {
        kunpengvCPuList.value.push(item);
      }
    });
    conList.value = kunpengvCPuList.value;
  }
};

const kunPengMemory = (e: any) => {
  if (kunpengvCPuList.value.length == 0) {
    kunpengMemoryList.value = [];
    conList.value = kunPengList.value;
    conList.value.forEach((item: any) => {
      if (item.ram == e * 1024) {
        kunpengMemoryList.value.push(item);
      }
    });
    conList.value = kunpengMemoryList.value;
  } else {
    kunpengMemoryList.value = [];
    conList.value = kunpengMemoryList.value;
    kunpengvCPuList.value.forEach((item: any) => {
      if (item.ram == e * 1024) {
        kunpengMemoryList.value.push(item);
      }
    });
    conList.value = kunpengMemoryList.value;
  }
};

//磁盘
const isNumber1 = (e) => {
  const data = {
    disks: data_volume.value,
    id: chooseId.value,
    type: changType.value,
  };
  console.log(data_volume.value, data, "选择的内存型号");
  const jsonStr = JSON.stringify(data);
  queryPrice(jsonStr);
};

//带宽
const isNumber2 = () => {
  console.log(daiKuanNum.value, jingDongType.value, "带宽");
  const data = {
    bandwidthType: jingDongType.value,
    bandwidthSize: daiKuanNum.value,
    id: chooseId.value,
    type: changType.value,
  };
  const jsonStr = JSON.stringify(data);
  queryPrice(jsonStr);
};

//选择静动
const chooseJingDong = (e) => {
  console.log(e, jingDongType.value, "静动");
  const data = {
    bandwidthType: jingDongType.value,
    bandwidthSize: daiKuanNum.value,
    id: chooseId.value,
    type: changType.value,
  };
  const jsonStr = JSON.stringify(data);
  queryPrice(jsonStr);
};

//删除指定数据盘
const reduce = (index) => {
  data_volume.value.splice(index, 1);
  if (data_volume.value.length > 0) {
    const data = {
      disks: data_volume.value,
      id: chooseId.value,
      type: changType.value,
    };
    const jsonStr = JSON.stringify(data);
  } else {
    price.value = 0;
  }
};
// 添加数据盘
const tianjia = () => {
  data_volume.value.push({
    diskType: "",
    size: 1,
  });
};

//加入购物车
const goShoppingCar = (jsonStr) => {
  shoppingCar({
    jsonStr,
    shoppingCarEnums: "CLOUD_SERVER_CHANGE",
    periodNum: 1,
    originalPrice: price.value,
    priceKey: priceKey.value,
  }).then((res: any) => {
    console.log(res, "加入购物车");
    if (200 == res.code) {
      router.push("/control/order/myShoppingCart");
    }
  });
};

//确认变更
const changeSubmit = () => {
  if (1 == changType.value) {
    //变更规格
    const data = {
      flavorRef: xuanzhongObj.value.name,
      id: chooseId.value,
      type: changType.value,
    };
    const jsonStr = JSON.stringify(data);
    goShoppingCar(jsonStr);
  } else if (2 == changType.value) {
    //变更磁盘
    const data = {
      disks: data_volume.value,
      id: chooseId.value,
      type: changType.value,
    };
    const jsonStr = JSON.stringify(data);
    goShoppingCar(jsonStr);
  } else if (3 == changType.value) {
    //变更带宽
    const data = {
      bandwidthType: jingDongType.value,
      bandwidthSize: daiKuanNum.value,
      id: chooseId.value,
      type: changType.value,
    };
    const jsonStr = JSON.stringify(data);
    goShoppingCar(jsonStr);
  }
};

//取消变更
const cancelChange = () => {
  price.value = 0;
  router.push("/control/myServer/cloudService");
};
</script>

<style scoped lang="less">
.dataDisk {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #313131;
  .addSubtractBox {
    width: 173px;
    height: 36px;
    margin: 0 20px;
  }
  .addDataDisk {
    margin-bottom: 30px;
  }
}
.addMsgBox {
  margin-bottom: 30px;
}
.con-title {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: flex;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
    }
  }
  span:nth-child(2) {
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 16px;
  }
}
.spec-label {
  padding-top: 18px;
}
.spec-value {
  display: flex;
  flex-direction: column;
  .images {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .imagesTitle {
      width: 185px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border: 1px solid #d9d9d9;
      color: #313131;
    }
    .imagesCon {
      width: 100%;
      display: flex;
    }
  }
  .clouds {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .cloudTitle {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      border-bottom: 1px solid rgba(227, 232, 240, 0.5);
      margin-top: 10px;
      .yunTitle {
        display: inline-block;
        width: 185px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border: 1px solid #d9d9d9;
        margin-bottom: 20px;
        color: #313131;
      }
    }
    .cloudBottom {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      color: #313131;
      .addSubtractBox {
        width: 173px;
        height: 36px;
        margin: 0 20px;
      }
    }
  }
  .times {
    width: 100%;
    height: 36px;
    margin: 12px 0;
  }
  .nums {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    color: #313131;
    margin: 12px 0 8px;
    .addSubtractBox {
      width: 173px;
      height: 36px;
      margin-right: 30px;
    }
  }
  .userName {
    margin: 18px 0 10px;
  }
  .isAnmount {
    width: 300px;
    margin: 12px 0;
  }
  .passWord {
    width: 300px;
    margin: 15px 0;
  }
}
.btn-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.specification {
  width: 100%;
  height: 537px;
  margin-top: 10px;
  background: #fafbfc;
  padding: 30px 0 20px;
  .cpuTypeList {
    width: 100%;
    height: 36px;
    margin-bottom: 20px;
    display: flex;
    span {
      width: 100px;
      line-height: 36px;
      text-align: center;
    }
    .CPUarchitecture {
      width: 100%;
      height: 100%;
      display: flex;
      > div {
        width: 100px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 10px;
        background: rgba(64, 152, 255, 0.1);
        &:hover {
          background: rgba(64, 152, 255, 0.4);
        }
      }
      .active {
        color: #ffffff;
        background: rgba(64, 152, 255, 1);
      }
    }
  }
  .specificationList {
    width: 100%;
    height: 36px;
    padding-left: 10px;
    margin-bottom: 20px;
    .type2 {
      background: rgba(64, 152, 255, 0.2);
      border: 1px solid #4098ff;
      color: #4098ff;
      display: inline-block;
      width: 96px;
      height: 36px;
      font-size: 12px;
      text-align: center;
      line-height: 36px;
      margin-right: 20px;
    }
    .typeAbout2 {
      background: rgba(64, 152, 255, 0.2);
      border: 1px solid #4098ff;
      color: #4098ff;
      display: inline-block;
      width: 150px;
      height: 36px;
      font-size: 12px;
      text-align: center;
      line-height: 36px;
      margin-right: 20px;
    }
    .type1 {
      background: #ffffff;
      border: 1px solid#D9D9D9;
      color: #313131;
      display: inline-block;
      width: 96px;
      height: 36px;
      font-size: 12px;
      text-align: center;
      line-height: 36px;
      margin-right: 20px;
    }
    .typeAbout1 {
      background: #ffffff;
      border: 1px solid#D9D9D9;
      color: #313131;
      display: inline-block;
      width: 150px;
      height: 36px;
      font-size: 12px;
      text-align: center;
      line-height: 36px;
      margin-right: 20px;
    }
  }
  .specificationOutside {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    .specificationOutsideTop {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      .title {
        width: 100%;
        height: 40px;
        display: flex;
        position: sticky;
        top: 0;
        justify-content: space-between;
        padding: 0 80px;
        align-items: center;
        background: #f6f8fa;
      }
      .specificationContent {
        width: 100%;
        height: 50px;
        padding: 0 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .specificationContent1 {
        width: 100%;
        height: 50px;
        padding: 0 80px;
        color: #fff;
        background: #223f9d;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .specificationOutsideBottom {
      width: 100%;
      padding: 10px 20px;
      height: 50px;
      position: sticky;
      bottom: 0;
      background: #e1ecfd;
      margin-top: 20px;
    }
  }
}
.selectSpecification {
  width: 100%;
  display: flex;
  padding-left: 10px;
  margin-bottom: 20px;
}
</style>
